<template>
  <div style="max-width: 1200px; margin: 0 auto; padding: 20px;">
    <header style="text-align: center; margin-bottom: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; border-radius: 10px;">
      <h1 style="font-size: 2.5em; margin: 0;">🎓 Nuxt 4 SSR 学习中心</h1>
      <p style="font-size: 1.2em; margin-top: 10px; opacity: 0.9;">跟着步骤，逐步理解 SSR 的魅力</p>
    </header>

    <!-- 学习路径 -->
    <div style="background: #f8f9fa; padding: 30px; border-radius: 10px; margin-bottom: 30px;">
      <h2 style="color: #333; margin-top: 0;">📖 推荐学习顺序</h2>
      
      <!-- 步骤1 -->
      <div :class="['step-card', currentStep >= 1 ? 'completed' : '']" @click="currentStep = 1">
        <div class="step-number">1</div>
        <div class="step-content">
          <h3>📚 第一步：阅读学习指南</h3>
          <p>先了解 SSR 的基本概念和四个核心问题的答案</p>
          <a href="/SSR学习指南.md" target="_blank" class="action-btn" @click.stop>
            📄 打开学习指南
          </a>
          <button @click.stop="markComplete(1)" class="complete-btn" v-if="currentStep === 1">
            ✅ 已完成，进入下一步
          </button>
        </div>
      </div>

      <!-- 步骤2 -->
      <div :class="['step-card', currentStep >= 2 ? 'completed' : '', currentStep < 1 ? 'locked' : '']">
        <div class="step-number">2</div>
        <div class="step-content">
          <h3>🔍 第二步：理解 SSR 的执行流程</h3>
          <p>查看代码在服务端和客户端的不同表现，理解为什么看不到网络请求</p>
          <div style="margin: 15px 0;">
            <strong>操作步骤：</strong>
            <ol style="margin: 10px 0; padding-left: 20px;">
              <li>点击下方按钮访问演示页面</li>
              <li>打开浏览器控制台（F12）</li>
              <li>查看 Console 和 Network 标签</li>
              <li>右键"查看网页源代码"，看数据是否在 HTML 中</li>
              <li>通过下方的 NuxtLink 跳转回来，观察区别</li>
            </ol>
          </div>
          <NuxtLink to="/demo-ssr" class="action-btn">
            🚀 访问 SSR 演示页面
          </NuxtLink>
          <button @click="markComplete(2)" class="complete-btn" v-if="currentStep === 2">
            ✅ 已完成，进入下一步
          </button>
        </div>
      </div>

      <!-- 步骤3 -->
      <div :class="['step-card', currentStep >= 3 ? 'completed' : '', currentStep < 2 ? 'locked' : '']">
        <div class="step-number">3</div>
        <div class="step-content">
          <h3>🌐 第三步：学习后端接口交互</h3>
          <p>掌握如何通过 Nuxt Server API 与后端通信（最重要！）</p>
          <div style="margin: 15px 0;">
            <strong>你将学习：</strong>
            <ul style="margin: 10px 0; padding-left: 20px;">
              <li>✅ GET 请求：获取用户列表</li>
              <li>✅ 动态路由：获取指定文章</li>
              <li>✅ POST 请求：模拟登录</li>
              <li>✅ useFetch vs $fetch 的区别</li>
              <li>✅ 为什么要用 Nuxt Server API 作为代理层</li>
            </ul>
          </div>
          <NuxtLink to="/api-demo" class="action-btn">
            🔌 访问 API 交互演示
          </NuxtLink>
          <button @click="markComplete(3)" class="complete-btn" v-if="currentStep === 3">
            ✅ 已完成，进入下一步
          </button>
        </div>
      </div>

      <!-- 步骤4 -->
      <div :class="['step-card', currentStep >= 4 ? 'completed' : '', currentStep < 3 ? 'locked' : '']">
        <div class="step-number">4</div>
        <div class="step-content">
          <h3>🖼️ 第四步：图片加载优化</h3>
          <p>了解如何优化图片加载性能，提升用户体验</p>
          <div style="margin: 15px 0;">
            <strong>学习内容：</strong>
            <ul style="margin: 10px 0; padding-left: 20px;">
              <li>普通 img 标签的问题</li>
              <li>如何使用 NuxtImg 组件</li>
              <li>懒加载和格式优化</li>
              <li>assets vs public 目录的区别</li>
            </ul>
          </div>
          <NuxtLink to="/image-demo" class="action-btn">
            🎨 访问图片优化演示
          </NuxtLink>
          <button @click="markComplete(4)" class="complete-btn" v-if="currentStep === 4">
            ✅ 已完成，进入下一步
          </button>
        </div>
      </div>

      <!-- 步骤5 -->
      <div :class="['step-card', currentStep >= 5 ? 'completed' : '', currentStep < 4 ? 'locked' : '']">
        <div class="step-number">5</div>
        <div class="step-content">
          <h3>🎉 第五步：实践与巩固</h3>
          <p>查看代码，尝试修改和实验</p>
          <div style="margin: 15px 0;">
            <strong>建议实践：</strong>
            <ul style="margin: 10px 0; padding-left: 20px;">
              <li>📂 查看 <code>server/api/</code> 目录下的所有文件</li>
              <li>📝 尝试创建自己的 API 端点</li>
              <li>🔄 修改现有的演示页面</li>
              <li>🧪 实验不同的数据获取方式</li>
              <li>📖 重新阅读学习指南，加深理解</li>
            </ul>
          </div>
          <button @click="markComplete(5)" class="complete-btn" v-if="currentStep === 5">
            🎊 完成所有学习！
          </button>
        </div>
      </div>

      <!-- 完成提示 -->
      <div v-if="currentStep > 5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 10px; text-align: center; margin-top: 30px;">
        <h2 style="font-size: 2em; margin: 0;">🎊 恭喜完成学习！</h2>
        <p style="font-size: 1.2em; margin-top: 15px;">你已经掌握了 Nuxt 4 SSR 的核心概念！</p>
        <button @click="currentStep = 1" style="background: white; color: #667eea; padding: 12px 30px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; margin-top: 20px;">
          🔄 重新开始学习
        </button>
      </div>
    </div>

    <!-- 当前页面的 useFetch 示例 -->
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 30px;">
      <h2 style="color: #333; margin-top: 0;">💡 当前页面的 SSR 示例</h2>
      <p style="color: #666;">这个页面本身就使用了 <code>useFetch</code> 调用了 <code>/api/hello</code></p>
      <div style="background: #f8f9fa; padding: 15px; border-radius: 5px; margin: 15px 0;">
        <strong>提示：</strong>
        <ul style="margin: 10px 0; padding-left: 20px;">
          <li>刷新页面（F5），在控制台 Network 看不到 /api/hello 请求</li>
          <li>点击其他页面的链接跳转回来，就能看到请求了</li>
        </ul>
      </div>
      <div style="background: #2d3748; color: #68d391; padding: 20px; border-radius: 5px; margin-top: 15px;">
        <strong>API 返回数据：</strong>
        <pre style="margin: 10px 0; color: #68d391;">{{ data }}</pre>
      </div>
    </div>

    <!-- 其他原有功能 -->
    <div style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
      <h2 style="color: #333; margin-top: 0;">🔗 其他功能</h2>
      
      <div style="margin: 20px 0;">
        <h3>动态路由示例：</h3>
        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
          <NuxtLink to="/posts/1" class="link-btn">📄 文章 1</NuxtLink>
          <NuxtLink to="/posts/2" class="link-btn">📄 文章 2</NuxtLink>
          <NuxtLink to="/posts/3" class="link-btn">📄 文章 3</NuxtLink>
        </div>
      </div>

      <div style="margin: 20px 0;">
        <h3>其他页面：</h3>
        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
          <NuxtLink to="/about" class="link-btn">ℹ️ 关于我们</NuxtLink>
          <NuxtLink to="/dashboard" class="link-btn">📊 Dashboard</NuxtLink>
          <NuxtLink to="/nuxtimg-principle" class="link-btn">🔍 NuxtImg 原理详解</NuxtLink>
        </div>
      </div>

      <div style="margin: 20px 0;">
        <h3>自动导入组件示例：</h3>
      <AppAlert>
          这是一个自动导入的组件 ✨
      </AppAlert>
      </div>

      <div style="margin: 20px 0;">
        <h3>图片示例：</h3>
        <img src="~/assets/image/cute.png" alt="可爱图片" style="width: 180px; border-radius: 10px;">
        <p style="color: #999; font-size: 0.9em;">💡 这个图片没有优化，访问"图片优化演示"学习最佳实践</p>
      </div>
    </div>

    <!-- 进度指示器 -->
    <div style="position: fixed; bottom: 20px; right: 20px; background: white; padding: 15px 20px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
      <strong>学习进度：</strong> {{ Math.min(currentStep, 5) }}/5
      <div style="width: 150px; height: 8px; background: #e0e0e0; border-radius: 4px; margin-top: 8px;">
        <div style="height: 100%; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); border-radius: 4px; transition: width 0.3s;" 
             :style="{ width: (Math.min(currentStep, 5) / 5 * 100) + '%' }">
        </div>
      </div>
      </div>
    </div>
  </template>

<script setup lang="ts">
// 获取 API 数据示例
const { data } = await useFetch('/api/hello')

// 学习进度管理
const currentStep = ref(1)

const markComplete = (step: number) => {
  if (currentStep.value === step) {
    currentStep.value = step + 1
    // 保存到 localStorage
    if (process.client) {
      localStorage.setItem('nuxt-learning-step', String(currentStep.value))
    }
  }
}

// 从 localStorage 恢复进度
onMounted(() => {
  const savedStep = localStorage.getItem('nuxt-learning-step')
  if (savedStep) {
    currentStep.value = parseInt(savedStep)
  }
})
</script>

<style scoped>
.step-card {
  background: white;
  padding: 25px;
  margin: 20px 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20px;
  transition: all 0.3s;
  cursor: pointer;
  border-left: 5px solid #e0e0e0;
}

.step-card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.step-card.completed {
  border-left-color: #4caf50;
  background: linear-gradient(to right, #f1f8f4 0%, white 100%);
}

.step-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.step-card.locked:hover {
  transform: none;
}

.step-number {
  min-width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  font-weight: bold;
  flex-shrink: 0;
}

.step-card.completed .step-number {
  background: #4caf50;
}

.step-card.locked .step-number {
  background: #ccc;
}

.step-content {
  flex: 1;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.3em;
}

.step-content p {
  margin: 0 0 15px 0;
  color: #666;
  line-height: 1.6;
}

.action-btn {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
  margin-right: 10px;
  margin-top: 10px;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.complete-btn {
  background: #4caf50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
  margin-top: 10px;
}

.complete-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
}

.link-btn {
  display: inline-block;
  background: #f0f0f0;
  color: #333;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s;
}

.link-btn:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
}

code {
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  color: #d63384;
}
</style>